<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
		
		<title>DataTables example</title>
		<!-- <style type="text/css" title="currentStyle">
			@import "demo_page.css";
			@import "demo_table.css";
		</style> -->
		 <link rel="stylesheet" type="text/css" href="jquery.dataTables.css"/>
		<script type="text/javascript" language="javascript" src="jquery.js"></script>
		<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
		    function yourfunction(event) {
				$('#userForm').hide();
				$.get( "users/findUserById", {id: event},function( data ) {					
				$('#demo_edit').show();				
				$('#userForm_edit #id').val(data.id);
                $('#userForm_edit #firstName').val(data.firstname);
				$('#userForm_edit #lastName').val(data.lastname);
				$('#userForm_edit #emailId').val(data.emailid);	
                $('#userForm_edit #role').val(data.role.name);	
                $('#userForm_edit #password').val(data.password);				
                });				
			}	
			function validateEmail($email) {
			  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
			  if( !emailReg.test( $email ) ) {
				return false;
			  } else {
				return true;
			  }
			}
			$(document).ready(function() {
				$('#userForm').hide();
				$('#demo_edit').hide();
				$('#pwd').hide();
				var x =new Array();									
				$.get( "users/findAllUsers", function( data ) {					
					$.each(data, function(i, item) {					   
					   var myObject = new Array();
					   myObject.push("<a href='selectUser?id="+item.id+"'>"+item.id+"</a>");
					   myObject.push(item.firstname);
					   myObject.push(item.lastname);
					   myObject.push(item.emailid);		
                       myObject.push(item.role.name);						   
					   x.push(myObject);
					   console.log("item : "+item.id);
					});	
					
					//datatable - starts
					$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
					$('#example').dataTable( {
						"aaData":x ,
						"aoColumns": [
							{ "sTitle": "id", "sClass": "center" },
							{ "sTitle": "firstname", "sClass": "center" },
							{ "sTitle": "lastname", "sClass": "center" },
							{ "sTitle": "emailid", "sClass": "center" },
                            { "sTitle": "role", "sClass": "center" }							
						]
					} ); 
					//datatable - ends
					});				
				/* $( ".button_example" ).click(function() {
				$( "#userForm" ).show();
				$('#demo_edit').hide();
				}); */
				$( "#userForm" ).submit(function( event ) {
				var x = ($('#userForm #firstName').val() == "") || 
				($('#userForm #lastName').val() == "") || 
				($('#userForm #password').val() == "") || 
				($('#userForm #emailId').val() == "") ||
				(!validateEmail($('#userForm #emailId').val()));
				if(x){
				alert("Please enter valid input.")
				return false;
				}else return true;
				});
				$( "#userForm_edit" ).submit(function( event ) {
					var x = ($('#userForm_edit #firstName').val() == "") || 
					($('#userForm_edit #lastName').val() == "") || 
					($('#userForm_edit #emailId').val() == "") ||
					(!validateEmail($('#userForm_edit #emailId').val()));
					if(x){
					alert("Please enter valid input.")
					return false;
					}else {
						if($('#changePassword').is(':checked')){
						    if($('#newpassword').val() == "" && $('#confirmpassword').val() == ""){
							   alert("Please enter password.");
							   return false;
							}
							if($('#newpassword').val() == $('#confirmpassword').val()){
							$('#userForm_edit #password').val($('#newpassword').val());
							return true;
							}			
							else {
							$('#newpassword').val("");
							$('#confirmpassword').val("");
							alert("Password mismatch.");
							return false;
							}
						}else {
						    $('#newpassword').val("");
							$('#confirmpassword').val("");
							return true;
						}
					}
				});
				$( "#close_user" ).click(function() {
				$( "#userForm" ).hide();
				});
				$( "#close_user_edit" ).click(function() {
				$( "#demo_edit" ).hide();
				});
				$('#changePassword').click(function(){
				if (this.checked) {
					$('#pwd').show();
				}else $('#pwd').hide();
				});
			} );			
		</script>
</head>
<body id="dt_example">
<div id="container" class="center">
			<div><a class="button" href="newUser?role=Admin" style="font:white">Add User</a> </div><br/>
			<div id="dynamic"></div>
			</div>
</body>
</html>